<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
</head>
<body>
    <div id="bar" style="width:500px; height:300px;">
    
    </div>
    <div id="bar" style="width:500px; height:300px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', { renderer: 'canvas' });

        $(
            function () {
                fetchData(chart);
                setInterval(fetchData, 12000);
            }
        );
        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://10.10.10.9:5000/barChart",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }

    </script>
</body>

</html>